<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>ALLADYN Project homepage</title>
<link rel="stylesheet" href="../al.css" type="text/css">
<script src="../js/Alladyn.js" type="text/javascript"></script>
<script src="../js/subpaths.js" type="text/javascript"></script>
</head>

<body background="../img/bg.gif" onload="Alladyn();main()">
<div id="menu1" style="position:absolute; left:-100; top:290; z-index:3"><a href="contact.html"><img src="../img/m_feed_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu2" style="position:absolute; left:-100; top:130; z-index:3"><a href="desc.html"><img src="../img/m_desc_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu3" style="position:absolute; left:-100; top:170; z-index:3"><a href="gallery.html"><img src="../img/m_gallery_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu4" style="position:absolute; left:-130; top:210; z-index:3"><a href="docs.html"><img src="../img/m_docs_eng.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu5" style="position:absolute; left:-100; top:250; z-index:3"><a href="down.html"><img src="../img/m_down_en.gif" width="119" height="20"  border="0" alt=""/></a></div>
<div id="menu6" style="position:absolute; left:-100; top:90; z-index:3"><a href="about.html"><img src="../img/m_about_eng.gif" width="119" height="20" border="0"  alt=""/></a></div>
<div id="blue1" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue2" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue3" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue4" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue5" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="blue6" style="position:absolute; left:-100; top:0; z-index:2"><img src="../img/blue_mid.gif" width="26" height="20" alt=""/></div>
<div id="alll" style="position:absolute; left:312; top:-50; z-index:8"><img src="../img/name_half1.gif" width="104" height="26"/></div>
<div id="allr" style="position:absolute; left:313; top:-50; z-index:8"><img src="../img/name_half2.gif" width="101" height="26"/></div>
<div id="poziom" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="34"/></div>
<div id="pozioms" style="position:absolute; left:0; top:-50; z-index:7"><img src="../img/blue_d.gif" width="780" height="18"/></div>
<div id="pozioms2" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="6"/></div>
<div id="pozioms3" style="position:absolute; left:0; top:-20; z-index:7"><img src="../img/blue_mid.gif" width="780" height="3"/></div>
<div id="dhdsb" style="position: absolute; left: 13; top: -50; z-index: 10"><img src="../img/dhdsbig.gif" width="574" height="17"/></div>

<div id="title" style="position: absolute; left: 140; top: -50; z-index: 2"><img src="../img/t_docs.gif" width="562" height="35"></div>
<div id="docsmenu" class="content" style="position: absolute; left: 140; top: 160; z-index: 2; color: #8888AA; width: 562; text-align: center;">[<a href="docs4.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs6.html">Next chapter &gt;</a>]</div>

<div class="content" id="content" style="position: absolute; left: 140; top: 200; width:562; z-index: 2">
<div class="content">
	<a name="r5"></a><span class="header">5. Animation module - movement objects and methods.</span><br />
	Alladyn gives you effective and functional animation module, based on keyframes, with the ability to group movement elements and various types of the movement itself. With the synchronization of the whole animation, it is easy to program a composite and effective movement of a few elements.<br />
	Exact description of objects and methods responsible for movement in Alladyn is featured below. You can read more about how to use them (with examples) in the later parts of this manual.<br /><br />
	<a name="r51"></a><span class="b">5.1. Object STPE.</span><br />
	This object is responsible for synchronization of the animation, it also allows to divide the animation into groups and to separately  synchronize each one of them.<br />
	It contains two methods responsible for the state of animation:<br /><br />
	<ul>
	<li><span class="b">go (group, interval, autostop, user's function)</span>.<br />
	This function activates the animation of layers belonging to one group (the default group, which contain all layers without specified group, is "").<br />
	Interval is the distance in miliseconds between consecutive frames of animation.<br />
	Autostop is an optional parameter. When it's value is set to <span class="i">true</span>, after the animation is finished the process is terminated and it doesn't react to activation of whatever layer from this group. Skipping this parameter sets it's value to <span class="i">false</span>.<br />
	User's function is also an optional parameter, it has sense only for the <span class="i">true</span> value of the autostop parameter. The value of the user's function is a string describing (in JavaScript language) an action that should take place after the animation of a group is finished. It can be a JavaScript command, a few commands separated by semicolons or a call to other function, for example an activation of the other animation.<br /><br />
	<li><span class="b">stop (group)</span>.<br />
	Immediate stop of the animation group and process termination. It doesn't change the state of the layers contained in the group, so it allows to revive the animation at any time.<br /><br />
	</ul>
	<a name="r52"></a><span class="b">5.2. Object van</span>.</br />
	This object describes the eventual way of layer animation, every layer contains it in the vlay object (<span class="i">vlay.layer.van</span>). It has the following properties and methods:<br /><br />
	<ul>
	<li><span class="b">group</span> property.<br />
	It denominates the animation group that the layer belongs to. Default value is "".<br /><br />
	<li><span class="b">go (true/false)</span> property.<br />
	It denominates if the layer is animated during the animation of the group it belongs to. Default value is <span class="i">false</span>.<br /><br />
	<li><span class="b">mode</span> property.<br />
	It denominates the behaviour of the animation. <span class="i">loop</span> means that when the animation of a layer is finished, it will be restarted. <span class="i">ping</span> will cause restart of the animation in the opposite direction ("bounce"). Any other value will cause the animation to end after the path finishes and it will set the flag <span class="i">go</span> to false.<br /><br />
	<li><span class="b">UDF</span> (user defined function) property.<br />
	It denominates the function that will be activated after the layer animation finishes. It works like the user function in the STPE object.<br /><br />
	<li>method <span class="b">reset()</span>.<br />
	It causes the layer animation to immediately stop and it cleans the animation table, user functions etc. To stop the animation without cleaning other parameters of the <span class="i">van</span> object, instead of using <span class="i">reset</span> method set the <span class="i">go</span> property to <span class="i">false</span>.<br /><br />
	<li>method <span class="b">purge()</span>.<br />
	It cleans the animation path and sets the current frame as the first keyframe of the new path. It keeps animation group, user functions and current layer properties. It allows to easily and fluently change defined animation path during the animation, but under one condition: in the current movement (to the next defined keyframe) all movement properties that will be changed must be defined (the top and left position and eventually other properties that were changed during the animation).<br /><br />
	</ul>
	<a name="r53"></a><span class="b">5.3. Method vkf ({elements that are changing}, number of steps to accomplish the goal)</span> - KeyFrame.<br />
	This method allows to describe the animation using keyframes. Elements that are changing are written as pair <span class="i">name:value</span> (separated by colon), other elements are separated by commas. You can  pass only those properties which values will be changed between previous keyframe and keyframe that you're defining.<br />
	In the particular situation <span class="i">vkf({},10)</span> will mean stopping every layer action for 10 steps of it's group animation, and <span class="i">vkf({left:100,vopacity:50},1)</span> will move layer at once (in one step) to the position left=100px and set the transparency to 50%.<br /><br />
	The properties that we can change are:
	<ul>
	<li>all the numeric properties of the layer's <span class="i">style</span> object (<span class="i">top, left, zIndex</span> etc.),
	<li>property <span class="b">vopacity</span> (with two-state emulation for Netscape 4.x),
	<li>clip described as <span class="b">ct, cr, cb, cl</span> (top, right, bottom, left) - because of the differences in interpretation in different browsers, you have to always set all four parameters.
	</ul>
	Example of use:
</div>
<div class="ex1">
	vlay.nameoflayer.vkf({top:100,left:200,vopacity:50},10)<br />
	vlay.nameoflayer.vkf({top:100,left:0,vopacity:100},5)<br />
	vlay.nameoflayer.vkf({top:300,left:300},7)<br />
</div>
<div class="content">
	You can find examples showing the use of the animation module in the <a href="docs6.html">next chapter</a>.
<br /><br />
<center>[<a href="docs4.html">&lt; Previous chapter</a>] [<a href="docs.html">Table of contents</a>] [<a href="docs6.html">Next chapter &gt;</a>]</center>
</div>
<br />
</div>
</body>
</html>
